<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport"
	content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="email=no">
<title>普惠安信贷</title>
<script src="${basePath}/js/jsAXD/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="${basePath}/css/cssAXD/webuploader.css" />
<script src="${basePath}/js/jsAXD/webuploader.min.js"></script>
<script type="text/javascript" src="${basePath}/js/wechat/jweixin-1.0.0.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<scrip type="text/javascript" src="${basePath}/js/uploadimg/uploadimg.js"></script>
<#include '/frame/h5/include_js.html'> 
<#include '/frame/h5/include_css.html'>

</head>
<body style="background: #f1f1f1;">
	<header>
		<a href="javaScript:void(0);" onclick="toIndex()" class="back"></a>上传用途凭证
	</header>
	<div class="main uploadMain2">
		<div class="top">
			<div class="select">
				<label>放款时间</label>
				<div class="selectBox">
					<#if axdCustLoan?exists> <span id="loanId"
						data-value="${axdCustLoan.loanId}">${axdCustLoan.loanDate?string("yyyy-MM-dd")}</span>
					<#else> <span id="loanId" data-value="0">---请选择---</span> </#if>
					<ul>
						<#if loans?exists> 
							<#list loans as loan>
								<#if  loan.isCheck =='0' || loan.isCheckConform=='2'>
								<li data-value="${loan.loanId}">${loan.loanDate?string("yyyy-MM-dd")}</li>
								</#if>
							</#list> 
						</#if>
					</ul>
				</div>
			</div>
		</div>
		<div id="uploader-demo" class="uploadImg">
			<div id="fileList" class="uploader-list imgBox">
				<div id="filePicker" class="img uploadAdd"></div>
			</div>
			<div id="upInfo"></div>
			<div class="uploadBtn">
				<input id="submitBtn" type="button" value="上 传" />
			</div>
		</div>
	</div>
	<div class="alertWin4" id="alertWin">
		<div class="tipBox" >
			<h3 id="h3_title">温馨提示</h3>
			<p id="p_con"></p>
			<span id="btn" class="close"></span>
		</div>
	</div>
	<div class="alertWin4" id="orgWin">
		<div class="tipBox" >
			<h3 id="h3_title">温馨提示</h3>
			<p id="p_con">您还没有绑定机构，请扫描二维码完成绑定，再提交凭证！</p>
			<span id="orgClose" class="close"></span>
		</div>
	</div>
	<div class="alertWin3">
        <div class="box">
            <img src="${basePath}/images/load.gif" alt=""/>
            <p>loading...</p>
        </div>
    </div>
	<script>
		$(".alertWin3").hide();
   		 $("#alertWin").hide();
		$("#orgWin").hide();
        $(".selectBox span").click(function(e){
            e.stopPropagation();
            $(".selectBox ul").show();
        });
        $(".selectBox ul li").click(function(e){
            e.stopPropagation();
            var text=$(this).text();
            $(".selectBox span").text(text);
            $(".selectBox span").attr("data-value",$(this).attr("data-value"))
            $(".selectBox ul").hide();
        });
        $(document).click(function(){
            $(".selectBox ul").hide();
        });
   
    		<#if orgCode?exists && orgCode=='1'>
    			$("#orgWin").show();
    		</#if>
    		<#if loanStatus?exists>
    		    $("#p_con").html("您还没有放款中的贷款！")
    			$("#alertWin").show();
    		</#if>
    		$("#orgClose").click(function(){
    			wx.closeWindow();
    		});
    		$("#btn").click(function(){
    			window.location.href="${basePath}/anon/upload/index";
    		});
    function  toIndex(){
    	window.location.href="${basePath}/anon/upload/index";
    }	
 
    
    function imgshow(s){
    	
    	var url=$(s).attr("data-value");
    	var curr=$(s).attr("src");
        wx.previewImage({
            current: curr, // 当前显示图片的http链接
            urls: [url] // 需要预览的图片http链接列表
        });
    };
    var _arry = "";
    var lat = 0;
    var lon = 0;
    var num=0;
    jQuery(function() {
    	var $ = jQuery, $list = $('#fileList'),
    	// 优化retina, 在retina下这个值是2
    	ratio = window.devicePixelRatio || 1,
    	// 缩略图大小
    	thumbnailWidth = 64 * ratio, thumbnailHeight = 64 * ratio,
    	// Web Uploader实例
    	uploader;
    	// 初始化Web Uploader
    	uploader = WebUploader.create({
    		// 自动上传。
    		auto : true,
    		// swf文件路径
    		swf : base + '/js/jsAXD/Uploader.swf',
    		// 文件接收服务端。
    		server : base + '/anon/photo/uploadImage',
    		// 选择文件的按钮。可选。
    		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
    		pick : '#filePicker',
    		// 图片质量，只有type为`image/jpeg`的时候才有效。
    		quality : 90,
    		// 只允许选择文件，可选。
    		accept : {
    			title : 'Images',
    			extensions : 'gif,jpg,jpeg,bmp,png',
    			mimeTypes : 'image/*'
    		}
    	});
    	var loanId = 0;
    	// 点击上传
    	$('#submitBtn').on('click', function() {
    		loanId = $('#loanId').attr("data-value");
    		if (loanId == "0") {
    			tip.info("请选择贷款时间！");
    			return false;
    		}
    		$(".alertWin3").show();
    		$.ajax({
    			type : 'POST',
    			url : base + '/anon/upload/imges',
    			data : {
    				"loanId" : loanId,
    				"imgs" : _arry
    			},
    			dataType : "json",
    			success : function(data) {
    				$(".alertWin3").hide();
    				if (data.status == "1") {
    					$("#p_con").html("凭证信息上传成功，请您耐心等待审核结果！")
    					$("#alertWin").show();
    					return false;
    				} else if (data.status == "2") {

    					$("#p_con").html("您已上传过凭证，请您耐心等待审核结果！")
    					$("#alertWin").show();
    					return false;
    				} else {
    					tip.info(data.msg);
    					return false;
    				}
    			}

    		});

    	})
    	// 当有文件添加进来的时候
    	uploader.on('fileQueued', function(file) {
    		var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
    				+ '<img onclick="imgshow(this);">'
    				+ '<span class="close" ></span>' +

    				'</div>'), $img = $li.find('img');
    		// $list为容器jQuery实例
    		$list.prepend($li);
    		$li.children("span").click(function () {
    			var flag=false;
    			$(".alertWin3").show();
    	        var path= $(this).attr("data-value");
    	         $.ajax({
    	         	type : 'POST',
    	 			url : base + '/anon/upload/edit',
    	 			data : {
    	 				"path" : path
    	 			},
    	 			dataType : "json",
    	 			success : function(data) {
    	 				$(".alertWin3").hide();
    	 				if (data.status == "1") {
    	 					_arry=_arry.replace(','+path+',',',');
    	 				}else {
    	 					flag=true;
    	 					tip.info("删除失败！");
    	 					return false;
    	 				}
    	 			}

    	 		});
    	         	if(!flag){
    	         	   uploader.removeFile(file);
    	               $(this).parents(".file-item").remove();
    	         	}
    	      
    			
    			
               
            });

    		// 创建缩略图
    		// 如果为非图片文件，可以不用调用此方法。
    		// thumbnailWidth x thumbnailHeight 为 100 x 100
    		uploader.makeThumb(file, function(error, src) {
    			if (error) {
    				$img.replaceWith('<span>不能预览</span>');
    				return;
    			}

    			$img.attr('src', src);
    		}, thumbnailWidth, thumbnailHeight);
    	});

    	// 文件上传过程中创建进度条实时显示。
    	uploader .on('uploadProgress',function(file, percentage) {
					$(".alertWin3").show();
					// 避免重复创建
					var $li = $('#' + file.id), $percent = $li.find('.progress span');
					if (!$percent.length) {
						$percent = $(
								'<p class="progress"><span></span></p><input type="hidden" name="lat" class="input_lat" value="'
										+ lat
										+ '"><input type="hidden" name="lon" class="input_lon" value="'
										+ lon + '">').appendTo($li).find(
								'span');
					}
			
				$percent.css('width', percentage * 100 + '%');
			});

    	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
    	// 注意我写样式了啊response:服务端返回的数据
    	uploader.on('uploadSuccess', function(file, response) {
    		$(".alertWin3").hide();
    		if (response.code == "success") {
    			var imgsName= "#WU_FILE_"+num;
    			$(imgsName).children("img").attr("data-value",response.image.url+response.image.path);
    			$(imgsName).children("span").attr("data-value",response.image.path);
    			num+=1;
    			_arry += response.image.path + ",";
    			return false;
    		}
    	});
    	// 文件上传失败
    	uploader.on('uploadError', function(file) {
    		$(".alertWin3").hide();
    		tip.info("上传失败！");

    	});

    	// 完成上传完了，成功或者失败，先删除进度条。
    	uploader.on('uploadComplete', function(file) {
    		$('#' + file.id).find('.progress').remove();
    	});

    	uploader.on('filesQueued', function(files) {
    	});
    	
    });
    </script>

</body>
</html>